<script lang="ts" setup>
import type { spotItem } from '@/types/eat'

import { postActivityDegreeApi } from '@/services/component'
import { useDeviceStore, useMemberStore } from '@/stores'
import { SwitchingDistance, Toast } from '@/utils/tools'

const memberStore = useMemberStore() // 本地有缓存的 token 不调用临时 token
const { deviceId } = uni.getSystemInfoSync() // 获取登录设备信息

const props = defineProps<{
  flag?: boolean
  list?: spotItem[]
  count?: number
}>()

const emit = defineEmits<{
  (event: 'close'): void
  (event: 'collect', item: any): void
  (event: 'myClick', e: any): void
}>()
/** 点击设备 */
const clickDevice = (e: any) => {
  // console.log(e)
  try {
    addActivityDegree(e.machineId)
  } catch (error) {
    console.log(error)
  }
  if (e.businessStatus !== '运营中') return Toast('设备不在营业中')
  emit('myClick', e)

  setTimeout(() => {
    emit('close')
  }, 200)
}

/** 设备点击收藏触发活跃度 */
const collect = (item: any) => {
  emit('collect', item)
  addActivityDegree(item.machineId)
}

/**活跃度接口 */
const addActivityDegree = async (machineId: string) => {
  await postActivityDegreeApi({
    machineId: machineId,
    temporarySign: memberStore.token ? null : deviceId,
  })
}

/**
 * @param skipMapFn 跳转地图
 */
const skipMapFn = (e: any) => {
  uni.openLocation({
    latitude: Number(e.latitude),
    longitude: Number(e.longitude),
    success: (success) => {
      console.log('成功进入跳转地图')
    },
  })
}
</script>

<template>
  <view class="spot">
    <view
      class="spotItem"
      @tap="clickDevice(item)"
      v-for="item in props.list"
      :key="item.machineId"
    >
      <view class="leftModule">
        <view class="s_Name">
          <view>
            {{ item.machineName }}
            <text class="date">{{ item.saleBeginTime + '-' + item.saleEndTime }}</text></view
          >
          <!-- <text
            @tap.stop="collect(item)"
            class="iconfont"
            :class="item.isBookmark === true ? 'icon_XingX_1' : 'icon_XingX_0'"
          ></text> -->
          <text
            v-if="item.isBookmark"
            @tap.stop="collect(item)"
            class="iconfont icon_XingX_1"
          ></text>
          <text v-else @tap.stop="collect(item)" class="iconfont icon_XingX_0"></text>
        </view>
        <view class="s_Id">(No.{{ item.machineId }})</view>
        <view class="s_Details"
          >{{ item.positionAddr }} {{ SwitchingDistance(item.distanceCenterPoint + 'm') }}</view
        >
        <view class="s_tag">
          <view class="item">{{ item.businessStatus }}</view>
          <view class="item" :class="{ disable: item.operationalOnlineStatus != 1 }">
            {{ item.operationalOnlineStatus === 1 ? '可代取' : '不可代取' }}
          </view>
          <view class="item await" v-if="item.awaitNum && item.businessStatus === '运营中'">
            前方{{ item.awaitNum }}份制作中
          </view>
          <view class="item production" v-else-if="item.businessStatus === '运营中'">
            <text class="_NOW">NOW</text> 立即制作
          </view>
        </view>
        <!-- <view class="replaceBox" :class="{ activate: item.operationalOnlineStatus === 1 }">
          <view class="iconfont icon_replace"></view>
          <view> {{ item.operationalOnlineStatus === 1 ? '可代取' : '不可代取' }} </view>
        </view> -->
        <!-- <view class="progressBox" v-if="item.awaitNum && item.businessStatus === '运营中'">
          <view
            class="_progress"
            :style="{
              width: `${item.awaitNum < 7 ? 7 : item.awaitNum}%`,
              backgroundColor: item.awaitNum > 10 ? '#FFBD2C' : '#8ADF4B',
              borderRadius: '20rpx',
            }"
          ></view>
          <view class="progress_text"> 前方{{ item.awaitNum }}份制作中</view>
        </view> -->
        <!-- <view class="productionBox" v-else-if="item.businessStatus === '运营中'">
          <view class="_NOW">NOW</view> 立即制作
        </view> -->
      </view>
      <!-- <view class="rightModule">
        <view class="s_Select"> 选择设备 </view>
        <view class="s_Juli">{{ SwitchingDistance(item.distanceCenterPoint + 'm') }}</view>
        <view v-if="flag" @tap.stop="skipMapFn(item)" class="iconfont icon_xiaofeiji"></view>
      </view>
      <view class="marker" v-if="item.type !== null && item.type !== undefined">{{
        item.type === 0 ? '最近下单' : item.type === 1 ? '收藏' : item.type === 2 ? '离你较近' : ''
      }}</view> -->
    </view>
  </view>
</template>

<style lang="scss" scoped>
.spot {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .spotItem {
    display: flex;
    width: 100%;
    padding: 36rpx 32rpx;
    border-radius: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0rpx 4rpx 198rpx 2rpx rgba(0, 0, 0, 0.05);
    &:hover {
      box-sizing: border-box;
      border: 1px solid $uni-color-motif;
    }
    .marker {
      padding: 6rpx 20rpx;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      border-radius: 0px 16rpx;
      background: #ff7b59;
      color: #fff;
      font-family: 'PingFang SC';
      font-size: 20rpx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
  .S_loading {
    width: 100%;
    text-align: center;
    color: #00000080;
  }
}
// 左侧点位信息
.leftModule {
  position: relative;
  flex: 1;
  .s_Name {
    position: relative;
    height: 36rpx;
    font-size: 30rpx;
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .iconfont {
      margin-left: 16rpx;
      font-size: 28rpx;
      z-index: 999;
    }
    .icon_XingX_1,
    .icon_XingX_0 {
      color: #ffaa2c;
      font-size: 42rpx;
    }
    .date {
      font-weight: normal;
      font-size: 28rpx;
      color: #858585;
    }
  }
  .s_Id {
    height: 30rpx;
    margin: 10rpx 0 16rpx 0;
    font-size: 24rpx;
    color: #ccc;
  }
  .s_Date {
    display: flex;
    align-items: center;
    height: 32rpx;
    font-size: 22rpx;
    color: #00000080;
    .s_Status {
      width: 96rpx;
      margin-left: 10rpx;
      text-align: center;
      font-size: 20rpx;
      border: 1px solid #0000001a;
      border-radius: 36rpx;
      background-color: #f0f0f0;
    }
    .status_1 {
      color: $uni-color-motif;
      border: 1px solid #daf4c9;
      background-color: #f1ffee;
    }
    .status_2 {
      border: 1px #ffdf9a;
      color: #ffbd2c;
      background-color: #fff6e3;
    }
  }
  .s_Details {
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #858585;
    margin-bottom: 16rpx;
  }
  .s_tag {
    display: flex;
    font-size: 20rpx;
    color: $uni-color-motif;
    .item {
      border: 1px solid $uni-color-motif;
      height: 40rpx;
      line-height: 40rpx;
      padding: 0 14rpx;
      border-radius: 20rpx;
      margin-right: 12rpx;
      background: rgba(255, 190, 39, 0.1);
      &.disable {
        background: #f0f0f0;
        color: #858585;
        border: 1px solid #858585;
      }
      &.await {
        background: $uni-color-motif;
        color: #fff;
      }
      ._NOW {
        color: #f00;
        font-weight: bold;
      }
    }
  }
  // 代取按钮
  .replaceBox {
    position: absolute;
    right: -24rpx;
    top: -12rpx;
    text-align: center;
    padding-top: 4px;
    min-width: 62rpx;
    height: 68rpx;
    border-radius: 6rpx;
    color: #979797;
    background: #fcfcfc;
    box-shadow: 0 8rpx 8rpx 0 rgba(0, 0, 0, 0.09);
    font-size: 20rpx;
    .iconfont {
      font-size: 36rpx;
    }
  }

  .activate {
    color: $uni-color-motif;
  }
  .progressBox {
    display: flex;
    margin-top: 20rpx;
    width: 444rpx;
    height: 32rpx;
    border-radius: 20rpx;
    background: #f5f5f5;
    position: relative;
    ._progress {
      padding-left: 18rpx;
      height: 100%;
    }
    .progress_text {
      position: absolute;
      left: 18rpx;
      bottom: 2rpx;
      color: #000;
      font-size: 22rpx;
    }
  }
  .productionBox {
    display: flex;
    margin-top: 20rpx;
    width: 172rpx;
    height: 32rpx;
    line-height: 32rpx;
    font-size: 22rpx;
    text-align: center;
    border-radius: 20rpx;
    background: #f5f5f5;
    ._NOW {
      margin-right: 12rpx;
      width: 58rpx;
      height: 100%;
      line-height: 32rpx;
      color: #fff;
      font-size: 16rpx;
      border-radius: 20rpx;
      background-color: $uni-color-motif;
    }
  }
}
// 右测按钮信息
.rightModule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 4rpx 0 4rpx 42rpx;
  padding: 0 0 0 34rpx;
  height: 184rpx;
  border-left: 1px solid #0000001a;
  .s_Select {
    width: 112rpx;
    font-size: 28rpx;
    color: #000000e5;
  }
  .s_Juli {
    text-align: center;
    margin: 16rpx 0;
    font-size: 22rpx;
    color: #00000080;
  }
  .iconfont {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60rpx;
    height: 60rpx;
    font-size: 32rpx;
    border-radius: 50%;
    color: $uni-color-motif;
    background-color: #f1ffee;
    z-index: 1;
  }
}
</style>
